<template>
	<view class="box">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :latitude="latitude" :longitude="longitude" :markers="covers" ></map>
			</view>
		</view>
		<view class="bottom">
			<view class="bottomOne">
				<view class="p1">{{p1}}</view>
				<view class="p2">{{p2}}</view>
			</view>
			<view class="flex">
				<view>{{p3}}</view>
				<navigator url="luxians"><image :src="img1" class="img1"></image></navigator>
			</view>
			<view class="content">当前已走到<text class="text" @click="open()">瑞金></text></view>
			<view class="bottomTwos">
				<view class="bottomTwo" v-for="(item,index) in bottom">
					<view class="bottomCuntent">{{item.text}}</view>
					<view class="bottomCuntents">{{item.value}}</view>
				</view>
			</view>
		</view><!--bottom-->
		<view class="center" v-show="show">
			<view class="centers">
				<view class="tit">
					<view class="titles">
						<view class="title" v-for="(val,index) in item" @click="changes(index)" :class="{active:index == num}">
							<view>{{item[index]}}</view>
						</view>
					</view>
				</view>
				
				<view class="cuntent" v-for="(val,index) in cont" v-show="index==num">
					<view class="cuntents" v-for="items in val.conts">
						<view class="cuntentsLeft">
							<image :src="items.img2"></image>
							<view>{{items.name}}</view>
						</view>
					</view>
					<view class="cuntentss" v-for="items in val.contss">
						<view class="cuntentsRight">
							<view>{{items.names}}</view>
							<view>{{items.namess}}</view>
							<view class="texts"><navigator url="/pages/route/xiangqing">{{items.texts}}</navigator></view>
						</view>
					</view>
				</view>
			</view><!--centers-->
			<view class="border"></view>
			<button @click="close()">关闭</button>
		</view><!--center-->
	</view>
</template>

<script>
	export default {
		data(){
			return{
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id:1,
					latitude: 39.909,
					longitude: 116.39742,
					//iconPath: '../../../static/location.png'
				}, {
					id:2,
					latitude: 39.90,
					longitude: 116.39,
					//iconPath: '../../../static/location.png'
				}],
				p1:"兑换里程",
				p2:"GO",
				p3:"路线图",
				img1:"../../static/w2.png",
				bottom:[{
					text:'累计行走',
					value:'355.9里'
				},{
					text:'累计行走天数',
					value:'2'
				},{
					text:'排名>',
					value:'2009'
				},{
					text:'兑换比例',
					value:'10步=1里'
				},{
					text:'今日兑换步数',
					value:'733'
				},{
					text:'可兑换步数',
					value:''
				}],
				item: ["用户列表", "知识详解"],
				cont: [{
					conts:[{
						img2:'../../static/logo.png',
						name:'薛之谦1'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦2'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					},{
						img2:'../../static/logo.png',
						name:'薛之谦3'
					}
					]
					
				},{
					contss:[{
						names:'九峰山位于湘粤交界处，距粤汉铁路仅十多公里，9座高山连绵形成了一道天然的屏障，自古以来便是兵家必争之地。据当地党史资料记载，1934年11月初，红军突破湖南桂东、汝城至广东城口一带的国民党第二道封锁线，红一军多支部队分别从仁化突围向乐昌九峰进发。这时，后有追兵，前有拦截，为了甩掉尾追之敌，粉碎敌人在九峰堵截红军的企图，掩护中央纵队从湖南边境安全通过，红军到达浆源后，不顾日夜兼程行军的疲劳，马上部署战斗。红二师四团抢先占领浆源、文洞与茶料之间的观音山和向日峰制高点，随后派出数千人攻击茶料之敌。从上午8时开始，红军经过十多个小时的浴血奋战，打得敌人丢盔弃甲。',
						namess:'红军部队顺利完成了掩护中央军委等后续部队的任务后，11月7日~8日，队伍折回五山，由石下向汝城、宜章方向前进。13日，红军离开乐昌县境，占领湖南省宜章县城，成功突破了敌军第三道封锁线。',
						texts:'查看详情>'
					}]
				}], 
				num: 0,
				show:false
			}
		},
		methods:{
			goto(url){
				uni.navigateTo({
					url:url
				})
			},
			changes(key) {
				this.num = key;
			},
			close:function(){
				this.show = false
			},
			open:function(){
				this.show = true
			}
		}
	}
</script>

<style>
	.box{letter-spacing: 2px;}
	map{width: 100%;height: 60vh;}
	.bottom{position: relative;position: absolute;bottom: 30px;background-color: #fff;width: 100%;padding: 20px;box-sizing: border-box; border-top-left-radius: 30px;border-top-right-radius: 30px;}
	.bottomOne{width: 120rpx;height: 120rpx;background-color: #CBCBCB;border-radius: 50%;text-align: center;line-height: 60rpx;color: #fff;padding: 10px;position: absolute;top: -40px;left: 39%;}
	.p1{font-size: 12px;}
	.p2{font-size: 26px;}
	.flex{display: flex;justify-content: space-between;align-items: center;}
	.flex .img1{width: 60rpx;height: 60rpx;}
	.content{font-size: 12px;}
	.text{color: #2D8CF0;}
	.bottomTwos{display: flex;justify-content: space-around;text-align: center;flex-wrap: wrap;font-size: 12px;}
	.bottomTwo{width: 32%;margin-top: 20px;line-height: 30px;}
	.bottomCuntent{color: #80848F;}
	.center{background-color: rgba(0,0,0,0.7);position: absolute;top: 0;width: 100%;height: 100%}
	.centers{background-color: #fff;width: 80%;margin:80px auto 0;border-radius: 10px;height: 380px;overflow: auto;}
	.active{color: #f00;border-bottom: #f00 3px solid;font-size: 15px;}
	.cuntent{display: flex;flex-wrap: wrap;justify-content: space-around;}
	.cuntents{width: 70px;margin: 10px 0;}
	.cuntentss{margin: 10px;text-indent: 2em;line-height: 25px;}
	.texts{text-align: center;color: #2D8CF0;}
	.cuntentsLeft{font-size: 14px;text-align: center;}
	.cuntentsRight{width: 100%;font-size: 13px;}
	.cuntentsLeft>view{font-size: 13px;}
	.cuntentsLeft image{width: 58px;height: 58px;border-radius: 50%;margin: 0 auto;display: block;}
	.titles{display: flex;justify-content: space-between;position: fixed;border-bottom: 1px solid #ccc;width: 80%;background-color: #fff;border-top-left-radius: 10px;border-top-right-radius: 10px;font-size: 13px;}
	.tit{height: 70px;}
	.title{width: 50%;text-align: center;padding: 20px 0;}
	.border{border-left: 1px solid red;height: 40px;margin: 0 auto;width: 1px;}
	button{width: 80px;background-color: #f00;color: #fff;font-size: 14px;padding: 5px;}
</style>